<html>
<head>
  <title>shadow_dom_test.html</title>
  <script type="text/javascript" src="test_bootstrap.js">
  </script>
  <script type="text/javascript">
    goog.require('goog.testing.jsunit');
    goog.require('webdriver.chrome');
    goog.require('bot.locators');
  </script>
</head>
<body>
<H1>Page for Shadow DOM chromedriver tests</H1>
The various sections are highlighted with colored borders to make it more obvious
where each element comes from. Default to pushing the content off the first 
screen, to test that scrolling to the elements works.
<div id="padding"></div>
<script>
document.getElementById('padding').style.height = window.innerHeight;
</script>
<div id="outerDiv">
  <div id="innerDiv" style="border-style:solid;border-color:yellow">
    stuff
  </div>
</div>

<template id="parentTemplate">
  <div id="parentDiv">
    <div style="border-style:solid;border-color:green">
      <H3>Parent</H3>
      <H4>Contents</H4>
      <content></content>
    </div>
  </div>
</template>
<template id="childTemplate">
  <div id="childDiv">
    <div style="border-style:solid;border-color:red">
      <H3 id="heading">Child</H3>
      As the child of a nested shadow root, this is the most likely
      to go wrong bit of the page, so we'll concentrate our tests here.
      <H4>Contents</H4>
      <content></content>
      <input id="textBox" type="text" value="foo"/>
      <input type="button" onClick="buttonWasClicked()" value="button"
          id="button"/>
    </div>
  </div>
</template>
<script type="text/javascript" >
var parentShadowRoot = document.querySelector('#innerDiv').createShadowRoot();
parentShadowRoot.appendChild(document.querySelector('#parentTemplate'
    ).content.cloneNode(true));
var childShadowRoot = parentShadowRoot.querySelector("#parentDiv"
    ).createShadowRoot();
childShadowRoot.appendChild(document.querySelector('#childTemplate'
    ).content.cloneNode(true));
function buttonWasClicked() {
  document.querySelector("* /deep/ #textBox").value="Button Was Clicked";
}
</script>
<script type="text/javascript">

  function getCenterCoordinate(elem) {
    var rect = elem.getClientRects()[0];
    var x = rect.left + (rect.right - rect.left) / 2;
    var y = rect.top + (rect.bottom - rect.top) / 2;
    return new goog.math.Coordinate(x, y);
  }

  function testShadowRootIsElementClickable() {
    // check isElementClickable works as expected on elements within a shadow
    // DOM
    var elemButton = document.querySelector("* /deep/ #button");
    var elemText = document.querySelector("* /deep/ #textBox");

    // scroll to the element
    webdriver.chrome.getLocationInView(elemButton, true);
    assertTrue(
        "Button #button should be clickable",
        webdriver.chrome.isElementClickable(elemButton,
            getCenterCoordinate(elemButton)).clickable);
    assertFalse(
        "Textbox #textBox should not be clickable from #button's location",
        webdriver.chrome.isElementClickable(elemText,
            getCenterCoordinate(elemButton)).clickable);
  }

  function testShadowRootIsDisplayed() {
    // check isDisplayed works as expected on elements within a shadow
    // DOM
    var elem = document.querySelector("* /deep/ #textBox");
    assertTrue("Text box #textBox should be visible",
        webdriver.chrome.isElementDisplayed(elem));
    document.querySelector("#outerDiv").style.display="None";
    try {
      assertFalse(
        "Text box #textBox should not be visible",
        webdriver.chrome.isElementDisplayed(elem));
    } finally {
      document.querySelector("#outerDiv").style.display="";
    }
  }

  function testShadowRootFindElement() {
    // check FindElement works as expected on elements within a shadow
    // DOM
    var elemDiv = document.querySelector("* /deep/ #childDiv");
    var elemButton = document.querySelector("* /deep/ #button");
    assertEquals(
        "webdriver.chrome.findElement didn't find the element #button",
        elemButton,
        webdriver.chrome.findElement({"id" : "button"}, elemDiv));
  }

  function testBotLocatorsFindElements() {
    // webdriver.chrome.findElement depends on bot.locators.findElements.
    // So check that bot.locators.findElements keeps working as expected
    // with shadow roots
    var elemDiv = document.querySelector("* /deep/ #childDiv");
    var elemButton = document.querySelector("* /deep/ #button");
    var elems = bot.locators.findElements({"id" : "button"}, elemDiv);
    assertEquals("webdriver.chrome.findElements didn't find exactly 1 element for #button",
        1,
        elems.length);
    assertEquals(
        "webdriver.chrome.findElement didn't find the element button",
        elemButton,
        elems[0]);
  }

</script>
</body>
</html>



